<template>
	<div class="box">
		<el-select :value="newval" placeholder="" class="left" @change="change">
			<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
			</el-option>
		</el-select>
		<div class="right" v-if="[17,18,19].includes(newval)">
			<div v-if="[19].includes(newval)">
				<el-date-picker v-model="newDataVal" placeholder="" style="width:100%" :type="type === 'dateTime' ? 'datetime' : 'date'" v-bind="$attrs">
				</el-date-picker>
			</div>
			<div v-else class="right-box">
				<el-input placeholder="" :value="inputValue" type="number" class="input-with-select" @input="offsetChange">
					<el-select :value="dataVal" slot="append" placeholder="" @change='timeChange'>
						<template v-for="item in timeOption">
              <el-option v-if="type=='date'?item.value!=6 && item.value!=7:true" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </template>
					</el-select>
				</el-input>
				<el-popover placement="bottom" title="" width="100" trigger="hover" v-if='![6,7].includes(dataVal)'>
					<el-checkbox v-model="checkboxChecked">包含今天</el-checkbox>
					<i class="iconfont iconshezhi-xian opacity30" slot="reference"></i>
				</el-popover>

			</div>

		</div>
	</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Inject, Provide } from 'vue-property-decorator';
@Component({
  name: 'customPicker',
  components: {}
})
export default class extends Vue {
  @Prop({ default: () => ({}) }) public value!: any;
  @Prop({ default: () => ({}) }) public type!: any;
  private noValue: any = ''; // 过去、将来、指定日期的内容
  // 选择某类时间
  private get newval () {
    if (this.value.filterValue) {
      const selectd = this.options.find((val) => {
        return (
          Number(this.value.filterValue) === val.filterValue &&
          this.value.offset === val.offset &&
          typeof this.value.containsToday === 'object' // 为了是判断是过去一天，还是昨天这种情况
        );
      });
      if (selectd) {
        this.noValue = selectd.value;
      } else {
        // 是否是指定之日
        if (isNaN(this.value.filterValue) && !isNaN(Date.parse(this.value.filterValue))) {
          this.noValue = 19;
        } else {
          // 否则判断偏移量
          if (this.value.offset > 0) {
            this.noValue = 18;
          } else if (this.value.offset < 0) {
            this.noValue = 17;
          }
        }
      }
    }
    return this.noValue;
  }

  private get dataVal () {
    console.log(this.value.filterValue);
    return Number(this.value.filterValue) || '';
  }

  // 指定日期时间回显
  private get newDataVal () {
    return this.value.filterValue || '';
  }

  private set newDataVal (val) {
    this.$emit('input', {
      type: ['filterValue'],
      filterValue: val
    });
  }

  // 包含今天
  private get checkboxChecked () {
    return this.value.containsToday || false;
  }

  private set checkboxChecked (val) {
    this.$emit('input', {
      type: ['containsToday'],
      containsToday: val
    });
  }

  // 偏移量回显
  private get inputValue () {
    return Math.abs(this.value.offset) || '';
  }

  private options = [
    {
      value: 1,
      filterValue: 1,
      offset: -1,
      containsToday: null,
      label: '昨天'
    },
    {
      value: 2,
      filterValue: 1,
      offset: 0,
      containsToday: null,
      label: '今天'
    },
    {
      value: 3,
      filterValue: 1,
      offset: 1,
      containsToday: null,
      label: '明天'
    },
    {
      value: 4,
      filterValue: 2,
      offset: -1,
      containsToday: null,
      label: '上周'
    },
    {
      value: 5,
      filterValue: 2,
      offset: 0,
      containsToday: null,
      label: '本周'
    },
    {
      value: 6,
      filterValue: 2,
      offset: 1,
      containsToday: null,
      label: '下周'
    },
    {
      value: 7,
      filterValue: 3,
      offset: -1,
      containsToday: null,
      label: '上月'
    },
    {
      value: 8,
      filterValue: 3,
      offset: 0,
      containsToday: null,
      label: '本月'
    },
    {
      value: 9,
      filterValue: 3,
      offset: 1,
      containsToday: null,
      label: '下月'
    },
    {
      value: 11,
      filterValue: 4,
      offset: -1,
      containsToday: null,
      label: '上季度'
    },
    {
      value: 12,
      filterValue: 4,
      offset: 0,
      containsToday: null,
      label: '本季度'
    },
    {
      value: 13,
      filterValue: 4,
      offset: 1,
      containsToday: null,
      label: '下季度'
    },
    {
      value: 14,
      filterValue: 5,
      offset: -1,
      containsToday: null,
      label: '去年'
    },
    {
      value: 15,
      filterValue: 5,
      offset: 0,
      containsToday: null,
      label: '今年'
    },
    {
      value: 16,
      filterValue: 5,
      offset: 1,
      containsToday: null,
      label: '明年'
    },
    {
      value: 17,
      containsToday: false,
      label: '过去'
    },
    {
      value: 18,
      containsToday: false,
      label: '将来'
    },
    {
      value: 19,
      containsToday: null,
      label: '指定日期'
    }
  ];

  private timeOption = [
    { value: 5, label: '年' },
    { value: 3, label: '月' },
    { value: 1, label: '天' },
    { value: 7, label: '小时' },
    { value: 6, label: '分' }
  ];

  // 天、月、小时等时间改变
  private change (val) {
    const selected = this.options.find((item) => {
      if (item.value === val && item.filterValue) {
        if (val === 19) {
          this.$emit('input', {
            type: ['filterValue'],
            filterValue: item.filterValue
          });
        } else {
          this.$emit('input', {
            type: ['filterValue', 'offset', 'containsToday'],
            filterValue: item.filterValue,
            offset: item.offset,
            containsToday: item.containsToday
          });
        }
        return true;
      }
    });
    if (!selected) {
      if (val === 19) {
        this.$emit('input', {
          type: ['filterValue'],
          filterValue: ''
        });
      } else {
        this.$emit('input', {
          type: ['filterValue', 'offset', 'containsToday'],
          filterValue: '',
          offset: '',
          containsToday: false
        });
      }
    }
    this.noValue = val;
  }

  // 偏移量改变
  private offsetChange (val) {
    const newVal = parseInt(val, 10);
    this.$emit('input', {
      type: ['offset', 'containsToday'],
      offset: this.noValue === 17 ? -newVal : +newVal,
      containsToday: !!this.value.containsToday
    });
  }

  // 单独监听天等日期的改变
  private timeChange (val) {
    console.log(val);
    this.$emit('input', {
      type: ['filterValue', 'containsToday'],
      filterValue: val,
      containsToday: !![6, 7].includes(val)
    });
  }
}
</script>
<style lang="stylus" scoped>
.box {
	display flex
	padding-top 1px
	.left {
		flex 1
		padding-right 4px
	}
	.right {
		flex 1
		padding-left 4px
		.right-box {
			display flex
			height 32px
			line-height 32px
			.input-with-select {
				flex 1
			}
			.iconshezhi-xian {
				flex-basis 16px
				vertical-align middle
				margin-left 5px
			}
			/deep/ .el-input--suffix {
				right 0px
				.el-input__inner {
					padding-right 20px
				}
			}
		}
		/deep/ .el-input--small .el-input-group__append, .el-input--small .el-input-group__prepend {
			width 25px
			height 30px
		}
		/deep/ .el-input__suffix {
			right 10px
		}
	}
}
</style>
